import React from 'react';
import _ from 'underscore';

export default class RequestSettingView extends React.Component {
  statusChangingHandler(key, { target: { checked } }) {
    let { appId, appVersionId, propertyChanging } = this.props
      , value = checked ? '1' : '0'
      , changeKey = `${ appId }:${ appVersionId }:${ key }`
      , changes = {
        [changeKey]: `${ changeKey }:${ value }`
      };

    if (propertyChanging) {
      propertyChanging(['app', 'settings', key], value, changes);
    }
  } // statusChangingHandler

  render() {
    return (
      <div className="pure-u-1">
        <div className="fetcher-container">
          <h5 className="card-title sub">
            请求设置
            <sub style={{ fontSize: 12, marginLeft: 5 }}>
              { `(${ BlueWare.isAndroid ? 'Android' : 'iOS' } Agent 版本更新至 2.0.2 以上可用)` }
            </sub>
          </h5>
          <div className="content-container">
            <div className="pure-g">
              <div className="pure-u-1-2">
                <label>
                  <input
                    type="checkbox"
                    checked={ this.props['switch.http.error']}
                    onChange={ this.statusChangingHandler.bind(this, 'switch.http.error') }
                    disabled={ !this.props.isEditing } />
                  <span>是否采集网络错误详情数据</span>
                </label>
                {
                  !this.props.isEditing ? null : (
                    <p className="note" style={{ paddingLeft: 22 }}>
                      关闭采集网络错误 Trace 数据，将无法定位造成网络错误的原因
                    </p>
                  )
                }
              </div>
              <div className="pure-u-1-2">
                <label>
                  <input
                    type="checkbox"
                    checked={ this.props['switch.http.header'] }
                    onChange={ this.statusChangingHandler.bind(this, 'switch.http.header') }
                    disabled={ !this.props.isEditing } />
                  <span>是否采集 HTTP Request/Response Header 数据</span>
                </label>
                {
                  !this.props.isEditing ? null : (
                    <p className="note" style={{ paddingLeft: 22 }}>
                      打开采集 HTTP Request/Response Header 数据，有可能会暴露一些放在 header 里的敏感信息
                    </p>
                  )
                }
              </div>
              <div className="pure-u-1 mtb10">
                <label>
                  <input
                    type="checkbox"
                    checked={ this.props['switch.http.params']}
                    onChange={ this.statusChangingHandler.bind(this, 'switch.http.params') }
                    disabled={ !this.props.isEditing } />
                  <span>是否采集 HTTP 请求参数</span>
                </label>
                {
                  !this.props.isEditing ? null : (
                    <p className="note" style={{ paddingLeft: 22 }}>
                      打开采集 HTTP 请求参数，会采集请求的完整 URL，包含参数部分
                    </p>
                  )
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  } // render
}
